<template>
  <el-table v-loading="dataListLoading" :data="props.topicList" class="passTable">
    <el-table-column align="center" :label="t('modules.pass.thumbnail')" prop="topicId" width="100px">
      <template #default="{ row }: { row: Topic }">
        <img :src="baseurl + '/tempres/' + row.templatesInfoVo[0].thumbUrl" width="100"/>
      </template>
    </el-table-column>
   
    <el-table-column :label="t('flypass.theme-name')" prop="topicName">
      <template #default="{ row }: { row: Topic }">
        <div>{{ row.topicName }}</div>        
      </template>
    </el-table-column>

    <el-table-column align="center" :label="t('common.status')" prop="status">
      <template #default="{ row }: { row: Topic }">
        <el-tag :type="mapTagType[row.status]">
          {{ row.status === TopicStatus.InUse ? t('flypass.in_use') : t('merchant.normal') }}
        </el-tag>
      </template>
    </el-table-column>
    
    <el-table-column :label="t('operator.creTime')">
      <template #default="{ row }: { row: Topic }">
        {{ dateFilter(row.creTime) }}
      </template>      
    </el-table-column>

    <el-table-column :label="t('flypass.merchantPassIssuer')">
      <template #default="{ row }: { row: Topic }">
        {{ row.merchantPassIssuer.join(',') }}
      </template>      
    </el-table-column>

    <el-table-column width="75px">
      <template #default="{ row }: { row: Topic }">
        <el-dropdown class="align-middle" trigger="click">
          <el-button text class="w-8">
            <svg-icon icon-class="MoreFilled" />
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>             
              <el-dropdown-item @click.native="goTopicDetail(row.topicId)">
                <svg-icon icon-class="outlined-edit" />
                {{ t('common.detail') }}
              </el-dropdown-item>
              <el-dropdown-item @click.native="setTopic(row.topicId)">
                <svg-icon icon-class="outlined-highlight" />
                {{ t('flypass.set_pass_enable') }}
              </el-dropdown-item>   
              <el-dropdown-item @click.native="openDialog(row.topicId)">
                <span class="text-center">
                  <svg-icon icon-class="Shop" /> {{ $t('flypass.set_issuer') }}
                </span>
              </el-dropdown-item>                                       
              <el-dropdown-item danger @click.native="deleteTheme(row.topicId)">
                <svg-icon icon-class="outlined-delete" />
                {{ t('page.delete') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import type { Topic } from '@/api/topic/topicModel';
import { TopicStatus }  from '@/api/topic/topicModel'
import { defineComponent, defineProps, defineEmits } from 'vue'
import { useTopic } from './useTopic'
import { dateFilter } from '@/filters/index'

const props = defineProps(['topicList', 'request'])
const emits = defineEmits(['open-dialog'])
const { t } = useI18n()
const dataListLoading = ref(false)
const { mapTagType, goTopicDetail, deleteTheme, setTopic  } = useTopic(props.request)
const baseurl = import.meta.env.VITE_APP_PROXY

function openDialog(topicId: number) {
  emits('open-dialog', topicId)
}

</script>

<style lang="scss" scoped>
.passTable :deep(.el-table__header) {
  // display: none;
}
.passTable :deep(.cell) {
  height: auto;  
}

.passTable :deep(.el-table__row:first-child td.el-table__cell) {
  border-top: 1px solid #ebeef5;
}

.passTable :deep(.el-table__row td.el-table__cell) {
  border-bottom: 1px solid #ebeef5;
}
</style>
